<nz-layout class="layout">
  <nz-sider nzCollapsible nzBreakpoint="lg" [nzCollapsedWidth]="0">
    <div class="logo">
      <img src="../../assets/heima-logo.png"/>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline">
      <li nz-submenu nzTitle="员工管理" nzIcon="user" >
        <ul>
          <li nz-menu-item nzSelected routerLink="/">员工列表</li>
          <li nz-menu-item routerLink="/add">员工添加</li>
        </ul>
      </li>
      <li nz-submenu nzTitle="角色管理" nzIcon="smile" >
        <ul>
          <li nz-menu-item nzSelected>角色列表</li>
          <li nz-menu-item>角色添加</li>
        </ul>
      </li>
      <li nz-submenu nzTitle="权限管理" nzIcon="lock" >
        <ul>
          <li nz-menu-item nzSelected>权限列表</li>
        </ul>
      </li>
    </ul>

  </nz-sider>
  <nz-layout>
    <nz-header>
      <!-- 登出 -->
      <!-- <span nz-icon nzType="exclamation-circle" nzTheme="outline"></span> -->
      <div nz-row nzJustify="end">
        <div nz-col nzSpan="4" class="logout" >
          <nz-avatar nzIcon="user" nzSrc="../../assets/avatar.png"></nz-avatar>
          <a href="#"  nz-popconfirm
          nzPopconfirmTitle="是否确认退出?"

          nzPopconfirmPlacement="bottom" [nzIcon]="iconTpl" >
          <ng-template #iconTpl>
            <span nz-icon nzType="exclamation-circle" style="color: red;"></span>
          </ng-template>
            <span nz-icon nzType="logout" nzTheme="outline"></span>&nbsp;&nbsp;
            退出</a>
        </div>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
    <nz-footer>博学谷 ©2024</nz-footer>
  </nz-layout>
</nz-layout>
